<template>
  <div class="grid _m-2">
    <div class="title d-flex justify-content-between">
      <h3>{{blocks.blockName}}</h3>
      <h3 @click="refreshData"><i class="iconfont icon-huanyihuan"></i> 换一换</h3>
    </div>
    <eight-grid :data="blocks.booksVos.datas"></eight-grid>
  </div>
</template>

<script>
import EightGrid from '@/views/components/EightGrid'

import {findBooksByBlockId} from 'api/BlockApi'

export default {
  name: "GridFEight",
  components: {
    EightGrid
  },
  props: {
    blockId: Number
  },
  data () {
    return {
      search: {
        id: this.blockId,
        currentIndex: 1,
        pageSize: 8
      },
      blocks: {}
    }
  },
  methods: {
    findBooksByBlockId() {
      findBooksByBlockId(this.search).then(res => {
        if(res.meta.success) {
          this.blocks = res.data;
        }
      });
    },
    refreshData () {
      this.search.currentIndex ++;
      if(this.search.currentIndex > this.blocks.booksVos.pagination.totalPage)
        this.search.currentIndex = 1
        
      this.findBooksByBlockId();
    }
  },
  created () {
    this.findBooksByBlockId();
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.grid {
  background: #FFF;

  .title {
    height: 34px;
    font-size: 14px;
    line-height: 34px;

    h3 {
      padding-left: 3vw;
      padding-right: 2vw;
      position: relative;

      i {
          font-size 12px!important
          margin-right 4px
      }

      &:nth-child(1):after {
        content: '';
        width: 3px;
        height: 14px;
        display: inline-block;
        background: $colorPrimary;
        position: absolute;
        top: 10px;
        left: 1px;
        border-radius: 3px;
      }
    }
  }
}
</style>
